<!DOCTYPE html>
<!--[if IE 8]> <html lang="en" class="ie8 no-js"> <![endif]-->
<!--[if IE 9]> <html lang="en" class="ie9 no-js"> <![endif]-->
<!--[if !IE]><!-->
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Metronic Admin Theme #1 | Form Layouts</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <meta content="Preview page of Metronic Admin Theme #1 for form layouts" name="description" />
    <meta content="" name="author" />
    <link href="../assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/global/css/components.min.css" rel="stylesheet" id="style_components" type="text/css" />
    <link rel="stylesheet" href="../assets/custom/css/changeother.css"/>
<body>
<div class="portlet box blue ">
    <div class="portlet-title">
        <div class="caption">
            <i class="fa fa-gift"></i>Form Sample </div>
        <div class="tools">
            <a href="javascript:;" class="collapse"> </a>
            <a href="#portlet-config" data-toggle="modal" class="config"> </a>
            <a href="javascript:;" class="reload"> </a>
            <a href="javascript:;" class="remove"> </a>
        </div>
    </div>
    <div class="portlet-body form">
        <!-- BEGIN FORM-->
        <form action="#" class="form-horizontal form-bordered form-row-stripped">
            <div class="form-body">
                <div class="form-group">
                    <label class="control-label col-md-3">First Name</label>
                    <div class="col-md-9">
                        <input type="text" placeholder="small" class="form-control" />
                        <span class="help-block"> This is inline help </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">Last Name</label>
                    <div class="col-md-9">
                        <input type="text" placeholder="medium" class="form-control" />
                        <span class="help-block"> This is inline help </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">Gender</label>
                    <div class="col-md-9">
                        <select class="form-control">
                            <option value="">Male</option>
                            <option value="">Female</option>
                        </select>
                        <span class="help-block"> Select your gender. </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">Date of Birth</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" placeholder="dd/mm/yyyy"> </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">Category</label>
                    <div class="col-md-9">
                        <select class="form-control select2_category">
                            <option value="Category 1">Category 1</option>
                            <option value="Category 2">Category 2</option>
                            <option value="Category 3">Category 5</option>
                            <option value="Category 4">Category 4</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">Multi-Value Select</label>
                    <div class="col-md-9">
                        <select class="form-control select2_sample1" multiple>
                            <optgroup label="NFC EAST">
                                <option>Dallas Cowboys</option>
                                <option>New York Giants</option>
                                <option>Philadelphia Eagles</option>
                                <option>Washington Redskins</option>
                            </optgroup>
                            <optgroup label="NFC NORTH">
                                <option>Chicago Bears</option>
                                <option>Detroit Lions</option>
                                <option>Green Bay Packers</option>
                                <option>Minnesota Vikings</option>
                            </optgroup>
                            <optgroup label="NFC SOUTH">
                                <option>Atlanta Falcons</option>
                                <option>Carolina Panthers</option>
                                <option>New Orleans Saints</option>
                                <option>Tampa Bay Buccaneers</option>
                            </optgroup>
                            <optgroup label="NFC WEST">
                                <option>Arizona Cardinals</option>
                                <option>St. Louis Rams</option>
                                <option>San Francisco 49ers</option>
                                <option>Seattle Seahawks</option>
                            </optgroup>
                            <optgroup label="AFC EAST">
                                <option>Buffalo Bills</option>
                                <option>Miami Dolphins</option>
                                <option>New England Patriots</option>
                                <option>New York Jets</option>
                            </optgroup>
                            <optgroup label="AFC NORTH">
                                <option>Baltimore Ravens</option>
                                <option>Cincinnati Bengals</option>
                                <option>Cleveland Browns</option>
                                <option>Pittsburgh Steelers</option>
                            </optgroup>
                            <optgroup label="AFC SOUTH">
                                <option>Houston Texans</option>
                                <option>Indianapolis Colts</option>
                                <option>Jacksonville Jaguars</option>
                                <option>Tennessee Titans</option>
                            </optgroup>
                            <optgroup label="AFC WEST">
                                <option>Denver Broncos</option>
                                <option>Kansas City Chiefs</option>
                                <option>Oakland Raiders</option>
                                <option>San Diego Chargers</option>
                            </optgroup>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">Membership</label>
                    <div class="col-md-9">
                        <div class="radio-list">
                            <label>
                                <input type="radio" name="optionsRadios2" value="option1" /> Free </label>
                            <label>
                                <input type="radio" name="optionsRadios2" value="option2" checked/> Professional </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">Street</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control"> </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">City</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control"> </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">State</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control"> </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-md-3">Post Code</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control"> </div>
                </div>
                <div class="form-group last">
                    <label class="control-label col-md-3">Country</label>
                    <div class="col-md-9">
                        <select class="form-control"> </select>
                    </div>
                </div>
            </div>
            <div class="form-actions">
                <div class="row">
                    <div class="col-md-offset-3 col-md-9">
                        <button type="submit" class="btn green">
                            <i class="fa fa-check"></i> Submit</button>
                        <button type="button" class="btn default">Cancel</button>
                    </div>
                </div>
            </div>
        </form>
        <!-- END FORM-->
    </div>
</div>
<script src="../assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="../assets/pages/scripts/form-samples.min.js" type="text/javascript"></script>
</body>

</html>